<template>
    <view class="userdetails">
        <div class="top">
            <u-image src="../../static/businessImg/back.png" width="16rpx" height="29rpx" @click="back"></u-image>
            <u-image mode="scaleToFill" :src="userinfo.storeImage" class="avatar" width="67rpx" height="67rpx"
                @click="back"></u-image>
            <div class="topbackname">{{userinfo.storeName}}</div>
            <div class="topbackname">{{userinfo.storeMobile}}</div>
        </div>
        <div class="orderitem" v-for="item in orderList" :key="item.id">
            <div class="orderimg">
                <u-image mode="scaleToFill" :src="item.productImage" width="100%" height="100%"></u-image>
            </div>
            <div class="ordername">{{item.productName}}</div>
            <div class="math">{{item.createTime}} 添加至库中</div>
            <div class="orderprice">售出总量：{{item.sellNum}}</div>
            <div class="ordertimetop">销售单价: ￥{{ item.price }}</div>
            <div class="ordertimebottom">销售总额: ￥{{(Number(item.sellNum) * Number(item.price)).toFixed(2)}}
            </div>
        </div>
    </view>
</template>

<script>

import { saleStoreDataList } from '@/api/storeAdmin.js'
import storage from "@/utils/storage.js";
export default {
    data() {
        return {
            userinfo: {},
            orderList: [],
            page: 1,
            pageSize: 10,
        }
    },

    onLoad(option) {
        this.userinfo = JSON.parse(decodeURIComponent(option.userDetails))
    },

    mounted() {
        this.getList();

    },

    onReachBottom() {
        this.page = this.page + 1;
        this.getList()
    },
    methods: {
        back() {
            uni.navigateBack();
        },
        getList() {
            saleStoreDataList({
                page: this.page,
                limit: this.pageSize,
                storeId: storage.getUserInfo().storeId,
                saleId: this.userinfo.storeId,

            }).then(res => {
                this.orderList = res.data.list
            })
        },

    },

}
</script>

<style scoped>
.userdetails {
    width: 100%;
    min-height: 100vh;
    background: #F9FAFB;
    padding-bottom: 50rpx;
}

.top {
    width: 100%;
    height: 183rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 106rpx 28rpx 10rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.topbackname {

    width: 220rpx;
    height: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 29rpx;
    color: #222122;
    line-height: 30rpx;
    padding-left: 19rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar {
    margin-left: 19rpx;
}


.orderitem {
    width: 100%;
    background: rgb(245, 245, 245);
    height: 270rpx;
    margin-top: 17rpx;
    position: relative;
}

.orderimg {
    width: 244rpx;
    height: 244rpx;
    position: absolute;
    top: 15rpx;
    left: 25rpx;
}

.ordername {
    width: 386rpx;
    height: 75rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #222122;
    line-height: 40rpx;
    position: absolute;
    top: 15rpx;
    left: 285rpx;
}

.math {

    height: 19rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 22rpx;
    color: #A1A1A1;
    line-height: 19rpx;
    position: absolute;
    top: 112rpx;
    left: 285rpx;
}

.orderprice {
    width: 300rpx;
    height: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 25rpx;
    color: #222122;
    line-height: 24rpx;
    position: absolute;
    top: 157rpx;
    left: 285rpx;
}

.ordertimetop {

    height: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 25rpx;
    color: #222122;
    line-height: 24rpx;
    position: absolute;
    top: 190rpx;
    left: 285rpx;
}

.ordertimebottom {

    height: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 25rpx;
    color: #222122;
    line-height: 24rpx;
    position: absolute;
    bottom: 27rpx;
    left: 285rpx;
}
</style>
